1
00:00:00,520 --> 00:00:01,120
Okay.

2
00:00:01,120 --> 00:00:06,610
In this lecture I want to demonstrate another unique GUI object and that is a text box.

3
00:00:06,610 --> 00:00:12,610
A text box allows a user to input text, and then we can listen to an event for when a player confirms

4
00:00:12,610 --> 00:00:13,900
the text they've entered.

5
00:00:13,900 --> 00:00:19,420
This can be useful for many systems, like having a player enter in a password, using it for an admin

6
00:00:19,420 --> 00:00:22,120
system to send messages to players, and so on.

7
00:00:22,120 --> 00:00:24,580
So we'll search for a text box.

8
00:00:24,580 --> 00:00:25,540
Here it is.

9
00:00:26,160 --> 00:00:29,790
And here we have our nice little neat text box on the screen.

10
00:00:29,790 --> 00:00:34,350
This is basically just another frame, but you can enter text inside of it.

11
00:00:34,350 --> 00:00:37,920
So same properties as a normal frame.

12
00:00:37,920 --> 00:00:41,460
You got some color, the position the size.

13
00:00:41,460 --> 00:00:45,270
But we do have a little bit of some other options with our text box.

14
00:00:45,270 --> 00:00:50,520
For example, do we want to clear any text that the player has already entered when they focus into

15
00:00:50,520 --> 00:00:51,480
the text box?

16
00:00:51,480 --> 00:00:52,800
Right now it's enabled.

17
00:00:52,800 --> 00:00:58,830
So if I were to type hello inside of this text box and then regain focus back inside of it, that text

18
00:00:58,830 --> 00:00:59,760
gets deleted.

19
00:00:59,760 --> 00:01:06,720
But if I were to disable that and type in some text like hello, now if I go back and type in it again,

20
00:01:06,720 --> 00:01:10,110
it keeps my text in there and I'm able to edit that text.

21
00:01:10,740 --> 00:01:15,870
Another option we have is if we would like to be able to enter text onto multiple lines.

22
00:01:15,870 --> 00:01:19,920
So we could do hello and then we could do there and then here.

23
00:01:19,920 --> 00:01:22,710
So now we have three lines inside of our text box.

24
00:01:22,710 --> 00:01:27,330
And then we're also able to manipulate the spacing between this text.

25
00:01:27,330 --> 00:01:30,870
And then we have some additional settings such as text editable.

26
00:01:30,870 --> 00:01:37,620
And if we disable that actually let me go to clear text on focus if I type in hello.

27
00:01:37,620 --> 00:01:44,040
So far nothing is happening because I'm actually not able to edit the text because text editable is

28
00:01:44,040 --> 00:01:45,840
set to false.

29
00:01:45,840 --> 00:01:51,480
But if I go and re-enable it and I type hello, and then let's say I wanted to disable that.

30
00:01:51,480 --> 00:01:57,270
Now if I go and re-enter focus, I am not able to enter in text or delete the text that I've already

31
00:01:57,270 --> 00:01:58,230
typed in there.

32
00:01:59,070 --> 00:02:05,460
This property, called show native input, is most likely what you're going to use for mobile devices.

33
00:02:05,460 --> 00:02:11,610
So when you enter into or you gain focus into a text box, if you're on a mobile device, typically

34
00:02:11,610 --> 00:02:15,270
the mobile keyboard will show up if that is set to true.

35
00:02:15,270 --> 00:02:21,750
If this is set to false and then Roblox is built in, keyboard is going to show up instead of the native

36
00:02:21,750 --> 00:02:23,910
input for whatever device they're on.

37
00:02:23,910 --> 00:02:27,540
Most of the time, you'll want to leave this on for mobile devices.

38
00:02:28,270 --> 00:02:34,300
And of course, down here in this bottom section for our text label, we are able to change the font

39
00:02:34,300 --> 00:02:39,790
that the player is typing in if we would like it to scale, if we would like to change the color of

40
00:02:39,790 --> 00:02:43,690
the font, and we can even change and place in some placeholder font.

41
00:02:43,720 --> 00:02:48,790
So for example, if there is nothing inside of my text label currently there's no text in here, but

42
00:02:48,790 --> 00:02:53,500
if I go and set some placeholder text like enter text here.

43
00:02:53,890 --> 00:02:56,470
Now we're going to see is this placeholder text.

44
00:02:56,470 --> 00:03:00,850
And then when I gain focus into my text box there is our enter text here.

45
00:03:00,850 --> 00:03:03,520
And when I start typing that text disappears.

46
00:03:03,520 --> 00:03:07,690
And of course I can also adjust the color for that text as well.

47
00:03:08,310 --> 00:03:12,090
Now, the main thing I want to focus on with this text box is its events.

48
00:03:12,090 --> 00:03:13,830
So let's make a local script.

49
00:03:14,430 --> 00:03:18,930
Let's get a reference to the GUI, and then let's grab our text box.

50
00:03:18,930 --> 00:03:24,000
And inside of our text box there is an event called Focus Lost and it says fires.

51
00:03:24,000 --> 00:03:27,120
When the client lets their focus leave the text box.

52
00:03:27,120 --> 00:03:33,150
This is the event you're going to use to listen for whether or not the player entered input into the

53
00:03:33,150 --> 00:03:33,990
text box.

54
00:03:33,990 --> 00:03:40,410
And that's because if we connect a function to this event, we're going to actually be passed a boolean

55
00:03:40,470 --> 00:03:40,860
right here.

56
00:03:40,860 --> 00:03:42,720
It says enter pressed and it's a boolean.

57
00:03:42,720 --> 00:03:47,700
And this will tell you whether or not the player pressed enter when they lost focus out of the text

58
00:03:47,700 --> 00:03:48,060
box.

59
00:03:48,060 --> 00:03:51,690
And this can signify whether or not the player just clicked off of the text box.

60
00:03:51,690 --> 00:03:57,750
Or if they hit enter and they actually wanted to enter in that input or that text for the text box.

61
00:03:57,750 --> 00:04:01,350
So we'll call it Enter Pressed and it is a boolean.

62
00:04:01,440 --> 00:04:05,640
And what we're going to do is we're going to print this boolean out into the console.

63
00:04:05,640 --> 00:04:11,280
And then let me go ahead and disable where is it multi-line in our text box.

64
00:04:11,280 --> 00:04:13,800
And then let's go ahead and play test the game.

65
00:04:14,370 --> 00:04:16,590
If I gain focus into my text box.

66
00:04:16,590 --> 00:04:21,630
And then I lose focus by clicking away, you see it's going to print false because we did not hit enter

67
00:04:21,630 --> 00:04:22,500
on our keyboard.

68
00:04:22,500 --> 00:04:25,980
But let's say I typed something in here and then I were to hit enter.

69
00:04:25,980 --> 00:04:31,320
Well now we got a boolean telling us hey, the player hit enter on this keyboard, meaning any text

70
00:04:31,320 --> 00:04:37,170
that is inside of the text box should be used for whatever this event is listening for, so we can print

71
00:04:37,170 --> 00:04:38,430
out Enter pressed.

72
00:04:38,430 --> 00:04:43,890
And actually what we're going to do is if Enter Pressed was true, then we'll print out the text that

73
00:04:43,890 --> 00:04:45,180
is inside of our text box.

74
00:04:45,180 --> 00:04:49,860
So we'll refer to GUI dot text box and get the text that is inside of there.

75
00:04:51,050 --> 00:04:53,720
So now if I go and type in hello and then I hit enter.

76
00:04:53,720 --> 00:04:57,230
As you can see, it also prints hello into our console.

77
00:04:58,110 --> 00:05:00,900
Let's now actually do something a little bit fun.

78
00:05:00,930 --> 00:05:05,490
What I'm going to do is I'm going to listen for when my text box has gained focus.

79
00:05:05,490 --> 00:05:10,860
So focused we'll connect a function and I'm going to use the tween service.

80
00:05:10,860 --> 00:05:12,930
So let's grab the tween service.

81
00:05:15,720 --> 00:05:22,350
And I want to basically increase the size of my text box when it has gained focus.

82
00:05:22,380 --> 00:05:25,470
So one way we could do that is just by increasing the size.

83
00:05:25,470 --> 00:05:31,470
Or we could also add a UI scale inside of here and change this value as well.

84
00:05:31,500 --> 00:05:32,580
Doesn't really matter.

85
00:05:32,580 --> 00:05:34,050
Whatever works best for you.

86
00:05:34,050 --> 00:05:35,730
Let's go ahead and use the UI scale.

87
00:05:35,730 --> 00:05:39,840
And then I'm going to set the anchor point to be in the center.

88
00:05:39,840 --> 00:05:43,140
And then let me center this text box on my screen.

89
00:05:45,840 --> 00:05:52,350
And now when we gain focus, let's go ahead and use the tween service and we'll create a tween on our

90
00:05:52,350 --> 00:05:54,780
guy text box dot UI scale.

91
00:05:55,050 --> 00:05:57,810
We'll do a tween info dot new.

92
00:05:57,930 --> 00:06:03,300
Uh, let's say one second and let's do a wacky enum easing style.

93
00:06:03,300 --> 00:06:06,420
Like let's do elastic.

94
00:06:07,560 --> 00:06:11,820
And then we want to go ahead and change the scale to be let's say 1.5.

95
00:06:11,820 --> 00:06:13,830
And then we'll play that tween.

96
00:06:14,630 --> 00:06:17,630
And then when we lose focus in our text box.

97
00:06:17,630 --> 00:06:19,250
So focus lost.

98
00:06:20,310 --> 00:06:25,920
We'll do the exact same thing, but this time we'll tween our scale back to one.

99
00:06:28,060 --> 00:06:29,800
We'll set that value to one.

100
00:06:31,870 --> 00:06:34,420
Okay, let's go ahead and see what happens.

101
00:06:35,340 --> 00:06:36,960
If I gain focus.

102
00:06:36,960 --> 00:06:37,770
There we go.

103
00:06:37,770 --> 00:06:38,550
Look at that.

104
00:06:38,550 --> 00:06:40,470
Our text box bounces into view.

105
00:06:40,470 --> 00:06:43,320
And then when I lose focus there, it bounces back.

106
00:06:43,320 --> 00:06:48,660
So there's a whole bunch of different ways where you can go ahead and animate the elements on your screen.

107
00:06:48,660 --> 00:06:51,360
You can use the tween service to tween all sorts of stuff.

108
00:06:51,360 --> 00:06:55,440
If you want to rotate your box around, you want to change the size, you want to change the colors.

109
00:06:55,440 --> 00:07:02,160
You can do whatever you want with the tween service and GUI elements, so it's really fun to mess around

110
00:07:02,160 --> 00:07:02,940
with that.

111
00:07:03,970 --> 00:07:08,140
I hope you enjoyed this lecture and I will see you in the next one.